<template>
  <div id="content">
    <van-nav-bar
      title="宠物送养"
      left-arrow
      :border="false"
      @click-left="onClickLeft"
    />
    <!-- 头部上传 -->
    <div class="head">
      <van-row>
        <van-col span="12">
          <img src="@/assets/sysImgs/video.png" alt="" /><br />
          <span>上传视频</span>
        </van-col>
        <van-col span="12" @click="sctp">
          <img src="@/assets/sysImgs/img.png" alt="" />
          <br />
          <span>上传图片</span>
        </van-col>
      </van-row>
      <van-row>
        <van-col>
          <img src="@/assets/sysImgs/tips.png" alt="" />
          提示:
        </van-col>
        <van-col>
          <p>1.请至少选择三张图，第一张将默认为封面，也可以长按图片设为封面</p>
          <p>2.图片尺寸不低于600px,且不带文字水印或二维码</p>
        </van-col>
      </van-row>
    </div>
    <div class="content">
      <van-form>
        <p class="title">宠物信息</p>
        <van-field
          name="用户名"
          class="firstcell"
          input-align="right"
          label="昵称："
          placeholder="请输入宠物昵称"
          error-message-align="right"
          :border="false"
          v-model="nick"
        />
        <van-field
          name="年龄"
          readonly
          :value="value"
          input-align="right"
          label="年龄："
          placeholder="点击选择年龄"
          error-message-align="right"
          :border="false"
          clickable
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>

        <van-field
          name="地区"
          class="firstcell"
          input-align="right"
          label="地区："
          placeholder="请输入地区"
          error-message-align="right"
          :border="false"
          v-model="area"
        />
        <van-row>
          <van-col>性别：</van-col>
          <van-col class="sex">
            <div ref="sex1" @click="sex1()">未知</div>
            <div ref="sex2" @click="sex2()">男孩</div>
            <div ref="sex3" @click="sex3()">女孩</div>
          </van-col>
        </van-row>
        <van-row>
          <van-col>类别：</van-col>
          <van-col class="sex">
            <div ref="type1" @click="type1">猫猫</div>
            <div ref="type2" @click="type2">狗狗</div>
            <div ref="type3" @click="type3">其他</div>
          </van-col>
        </van-row>
        <p class="title">宠物状况</p>
        <van-row>
          <van-col>驱虫：</van-col>
          <van-col class="sex">
            <div ref="ant1" @click="ant1">未知</div>
            <div ref="ant2" @click="ant2">有</div>
            <div ref="ant3" @click="ant3">无</div>
          </van-col>
        </van-row>
        <van-row>
          <van-col>绝育：</van-col>
          <van-col class="sex">
            <div ref="ste1" @click="ste1">未知</div>
            <div ref="ste2" @click="ste2">有</div>
            <div ref="ste3" @click="ste3">无</div>
          </van-col>
        </van-row>
        <van-row>
          <van-col>免疫：</van-col>
          <van-col class="sex">
            <div ref="imm1" @click="imm1">未知</div>
            <div ref="imm2" @click="imm2">有</div>
            <div ref="imm3" @click="imm3">无</div>
          </van-col>
        </van-row>
        <p class="title">联系方式</p>
        <van-field
          name="用户名"
          class="firstcell"
          input-align="right"
          label="手机号："
          placeholder="请输入手机号"
          error-message-align="right"
          :border="false"
          v-model="phone"
        />
        <p class="title">宠物故事</p>
        <van-field
          rows="2"
          autosize
          label="宠物故事"
          type="textarea"
          maxlength="50"
          placeholder="请输入宠物故事"
          show-word-limit
          v-model="store"
        />
        <van-button type="danger" @click="onSub">发布送养</van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { addsubmit } from "@/api/recommend";
import { update } from "@/api/img";
export default {
  data() {
    return {
      value: "",
      showPicker: false,
      columns: [
        "0 - 2个月",
        "3 - 5个月",
        "6 - 8个月",
        "9 - 11个月",
        "1岁",
        "2岁",
        "3岁",
        "4岁",
        "5岁",
        "6岁",
        "7岁",
        "8岁",
        "9岁",
        "10岁",
        "11岁",
        "12岁",
        "13岁",
        "14岁",
        "15岁以上",
      ],
      //   昵称
      nick: "",
      //   年龄
      age: "",
      //   地区
      area: "",
      //  性别
      sex: "",
      //   类别
      type: "",
      //   是否驱虫
      ant: "",
      //   是否绝育
      ste: "",
      //   是否免疫
      imm: "",
      // 联系方式
      phone: "",
      //   宠物故事
      store: "",
    };
  },
  methods: {
    //跳转到上传图片
    sctp() {
      this.$router.push("/sctp");
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onClickLeft() {
      this.$router.push("/pet");
    },
    sex1() {
      this.$refs.sex1.style.color = "red";
      this.$refs.sex1.style.borderColor = "red";
      this.$refs.sex2.style.color = "#5e5e5e";
      this.$refs.sex2.style.borderColor = "white";
      this.$refs.sex3.style.color = "#5e5e5e";
      (this.$refs.sex3.style.borderColor = "white"), (this.sex = "未知");
    },
    sex2() {
      this.$refs.sex2.style.color = "red";
      this.$refs.sex2.style.borderColor = "red";
      this.$refs.sex1.style.color = "#5e5e5e";
      this.$refs.sex1.style.borderColor = "white";
      this.$refs.sex3.style.color = "#5e5e5e";
      this.$refs.sex3.style.borderColor = "white";
      this.sex = "0";
    },
    sex3() {
      this.$refs.sex3.style.color = "red";
      this.$refs.sex3.style.borderColor = "red";
      this.$refs.sex1.style.color = "#5e5e5e";
      this.$refs.sex1.style.borderColor = "white";
      this.$refs.sex2.style.color = "#5e5e5e";
      this.$refs.sex2.style.borderColor = "white";
      this.sex = "1";
    },
    type1() {
      this.$refs.type1.style.color = "red";
      this.$refs.type1.style.borderColor = "red";
      this.$refs.type2.style.color = "#5e5e5e";
      this.$refs.type2.style.borderColor = "white";
      this.$refs.type3.style.color = "#5e5e5e";
      (this.$refs.type3.style.borderColor = "white"), (this.type = "猫猫");
    },
    type2() {
      this.$refs.type2.style.color = "red";
      this.$refs.type2.style.borderColor = "red";
      this.$refs.type1.style.color = "#5e5e5e";
      this.$refs.type1.style.borderColor = "white";
      this.$refs.type3.style.color = "#5e5e5e";
      this.$refs.type3.style.borderColor = "white";
      this.type = "狗狗";
    },
    type3() {
      this.$refs.type3.style.color = "red";
      this.$refs.type3.style.borderColor = "red";
      this.$refs.type1.style.color = "#5e5e5e";
      this.$refs.type1.style.borderColor = "white";
      this.$refs.type2.style.color = "#5e5e5e";
      this.$refs.type2.style.borderColor = "white";
      this.type = "其他";
    },
    ant1() {
      this.$refs.ant1.style.color = "red";
      this.$refs.ant1.style.borderColor = "red";
      this.$refs.ant2.style.color = "#5e5e5e";
      this.$refs.ant2.style.borderColor = "white";
      this.$refs.ant3.style.color = "#5e5e5e";
      this.$refs.ant3.style.borderColor = "white";
      this.ant = "未知";
    },
    ant2() {
      this.$refs.ant2.style.color = "red";
      this.$refs.ant2.style.borderColor = "red";
      this.$refs.ant1.style.color = "#5e5e5e";
      this.$refs.ant1.style.borderColor = "white";
      this.$refs.ant3.style.color = "#5e5e5e";
      this.$refs.ant3.style.borderColor = "white";
      this.ant = "已驱虫";
    },
    ant3() {
      this.$refs.ant3.style.color = "red";
      this.$refs.ant3.style.borderColor = "red";
      this.$refs.ant2.style.color = "#5e5e5e";
      this.$refs.ant2.style.borderColor = "white";
      this.$refs.ant1.style.color = "#5e5e5e";
      this.$refs.ant1.style.borderColor = "white";
      this.ant = "未驱虫";
    },

    ste1() {
      this.$refs.ste1.style.color = "red";
      this.$refs.ste1.style.borderColor = "red";
      this.$refs.ste2.style.color = "#5e5e5e";
      this.$refs.ste2.style.borderColor = "white";
      this.$refs.ste3.style.color = "#5e5e5e";
      this.$refs.ste3.style.borderColor = "white";
      this.ste = "未知";
    },
    ste2() {
      this.$refs.ste2.style.color = "red";
      this.$refs.ste2.style.borderColor = "red";
      this.$refs.ste1.style.color = "#5e5e5e";
      this.$refs.ste1.style.borderColor = "white";
      this.$refs.ste3.style.color = "#5e5e5e";
      this.$refs.ste3.style.borderColor = "white";
      this.ste = "已绝育";
    },
    ste3() {
      this.$refs.ste3.style.color = "red";
      this.$refs.ste3.style.borderColor = "red";
      this.$refs.ste2.style.color = "#5e5e5e";
      this.$refs.ste2.style.borderColor = "white";
      this.$refs.ste1.style.color = "#5e5e5e";
      this.$refs.ste1.style.borderColor = "white";
      this.ste = "未绝育";
    },

    imm1() {
      this.$refs.imm1.style.color = "red";
      this.$refs.imm1.style.borderColor = "red";
      this.$refs.imm2.style.color = "#5e5e5e";
      this.$refs.imm2.style.borderColor = "white";
      this.$refs.imm3.style.color = "#5e5e5e";
      this.$refs.imm3.style.borderColor = "white";
      this.imm = "未知";
    },
    imm2() {
      this.$refs.imm2.style.color = "red";
      this.$refs.imm2.style.borderColor = "red";
      this.$refs.imm1.style.color = "#5e5e5e";
      this.$refs.imm1.style.borderColor = "white";
      this.$refs.imm3.style.color = "#5e5e5e";
      this.$refs.imm3.style.borderColor = "white";
      this.imm = "已免疫";
    },
    imm3() {
      this.$refs.imm3.style.color = "red";
      this.$refs.imm3.style.borderColor = "red";
      this.$refs.imm2.style.color = "#5e5e5e";
      this.$refs.imm2.style.borderColor = "white";
      this.$refs.imm1.style.color = "#5e5e5e";
      this.$refs.imm1.style.borderColor = "white";
      this.imm = "未免疫";
    },
    async onSub() {
      if (!this.nick) {
        return Toast.fail("请输入宠物昵称!");
      }
      this.age = this.value;
      if (!this.age) {
        d;
        return Toast.fail({ message: "请输入宠物年龄!" });
      }
      if (!this.area) {
        return Toast.fail({ message: "请输入宠物地区!" });
      }
      if (!this.sex) {
        return Toast.fail({ message: "请选择性别!" });
      }
      if (!this.type) {
        return Toast.fail({ message: "请选择类别!" });
      }
      if (!this.ant) {
        return Toast.fail({ message: "请确认宠物是否已驱虫!" });
      }
      if (!this.ste) {
        return Toast.fail({ message: "请确认宠物是否已绝育!" });
      }
      if (!this.imm) {
        return Toast.fail({ message: "请确认宠物是否已免疫!" });
      }
      if (!this.phone) {
        return Toast.fail({ message: "请输入手机号码!" });
      }
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        return Toast.fail({ message: "请输入正确的手机号码!" });
      }

      const data = await addsubmit({
        uid: this.$store.state.user.uid,
        uname: this.$store.state.user.uname,
        nickname: this.nick,
        age: this.age,
        area: this.area,
        sex: this.sex,
        type: this.type,
        status: `${this.ant},${this.ste},${this.imm}`,
        phone: this.phone,
        store: this.store,
      });
      console.log(data);
      if (data.data.status != 200) {
        return Toast.fail({ message: data.data.message });
      } else {
        update({
          uid: this.$store.state.user.uid,
          nickname: this.nick,
        }).then(res => {
          console.log(res);
        });
        Toast.success({ message: "发布成功!" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#content {
  //   background: -webkit-gradient(linear, 0% 0%, 0% 35%, from(#face23), to(#fff));
  .van-nav-bar {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0px;

    ::v-deep .van-icon {
      color: black;
    }
  }
  .head {
    font-family: "黑体";
    width: 100%;
    height: 230px;
    overflow: hidden;
    margin-top: 40px;

    > .van-row:first-child {
      width: 80%;
      margin: 10px auto;
      text-align: center;

      > .van-col {
        > img {
          width: 80px;
          height: 80px;
          margin: 0;
          padding: 0;
        }

        > span {
          font-size: 14px;
          color: #646466;
        }
      }
    }
    .van-row:nth-child(2) {
      width: 85%;
      margin: 0 auto;
      font-size: 14px;
      color: #858390;
      img {
        width: 13px;
        margin-left: 15px;
        margin-right: -5px;
      }

      > .van-col:last-child {
        background: #fffdf1;
        color: #ef9638;
        font-size: 12px;
        padding: 10px;

        > p {
          padding: 0;
          margin: 0;
          line-height: 20px;
        }
      }
    }
  }

  .content {
    width: 90%;
    height: 700px;
    margin: 0 auto;
    font-family: "黑体";

    .van-form {
      .title {
        font-size: 16px;
        padding: 0;
      }
      .firstcell {
        margin-top: 10px !important;
      }
      .van-cell {
        // background: greenyellow;
        margin-top: 15px;
        padding: 0;
        border-bottom: 1px solid #878787;
        height: 32px;

        &:focus-within {
          border-bottom: 1px solid #ffc70b !important;
          // background: red;
        }
      }
      .van-row {
        margin-top: 15px;

        .van-col {
          font-size: 14px;
        }
        .van-col:last-child {
          margin-top: -5px;
        }
      }
    }
  }
  .sex {
    display: flex;
    justify-content: space-between;
    line-height: 30px;

    div {
      &:first-child {
        margin-left: 15px;
      }
      font-size: 14px;
      text-align: center;
      margin-right: 25px;
      width: 60px;
      height: 28px;
      line-height: 28px;
      background: #f6f6f6;
      border-radius: 10px;
      color: #616161;
      border: 1px solid rgba(200, 200, 200, 0);

      &:active {
        color: red;
        border: 1px solid red;
      }
    }
  }
  ::v-deep .van-field__error-message {
    color: red !important;
    margin-top: -10px;
  }
}
.van-button {
  width: 150px;
  height: 30px;
  margin: 30px 0 0 86px;
  border-radius: 50px;
}
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: "黑体";
  }
}
</style>
